<template>
	<div class="topBg">
		<div class="more">
			<h3>特色</h3>
			<ul class="ulAll">
				<li v-for="item in list">{{item}}</li>
			</ul>
			<h3>车位比</h3>
			<ul class="ulNo ulNo1">
				<li data-minCwb='0' data-maxCwb='0.8' >0.8以下</li>
				<li data-minCwb='0.8' data-maxCwb='0.9' >0.8-0.9</li>
				<li data-minCwb='0.9' data-maxCwb='1.0' >0.9-1.0</li>
				<li data-minCwb='1.0' data-maxCwb='1.1' >1.0-1.1</li>
				<li data-minCwb='1.1' data-maxCwb='1' >1.1以上</li>
			</ul>
			<h3>社区规模</h3>
			<ul class="ulNo ulNo2">
				<li>微型社区</li>
				<li>小型社区</li>
				<li>中型社区</li>
				<li>大型社区</li>
				<li>巨型社区</li>
			</ul>
		</div>
		<div class="btn0">
			<button class="reset">重置</button>
			<button class="ok">确定</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				list:[]
			}
		},
		created:function(){
			var labels = JSON.parse(sessionStorage.getItem('houseLabel'))
			var type= localStorage.getItem('type');
			for(var i=0;i<labels.length;i++){
				if(type==labels[i].houseType){
					this.list.push(labels[i].houseLabel)
				}
			}
		},
		mounted: function() {
			let data = JSON.parse(localStorage.getItem('data'));
			if(data && data.screenCharacteristic){
				for(var i=0;i<data.screenCharacteristic.split(',').length;i++){
					$('.ulAll').find('li').each(function(){
						if($(this).html()==data.screenCharacteristic.split(',')[i]){
							$(this).attr('class','active');
						}
					})
				}
			}
			if(data && data.cheWeiBi.cheWeiBiNum){
				if(data.cheWeiBi.cheWeiBiNum.split('-')[0]==0){
					$('.ulNo1').find('li').eq(0).attr('class','active');	
				}
				console.log(data.cheWeiBi.cheWeiBiNum.split('-')[1])
				if(data.cheWeiBi.cheWeiBiNum.split('-')[1]=='1'){
					$('.ulNo1').find('li').eq(4).attr('class','active');	
				}
				$('.ulNo1').find('li').each(function(){
					if($(this).html()==data.cheWeiBi.cheWeiBiNum){
						$(this).attr('class','active');
					}
				})
			}
			
			if(data && data.sheQuGuiMo){
				$('.ulNo2').find('li').each(function(){
					if($(this).html()==data.sheQuGuiMo){
						$(this).attr('class','active');
					}
				})
			}
			
			$('.more .ulAll').on('click','li',function(){
				if($(this).hasClass('active')){
					$(this).removeClass('active');
				}else {
					$(this).addClass('active');
				}
			})
			$('.more .ulNo').on('click','li',function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
			var that = this;
			//请求数据
			$('.ok').click(function(){
				$('.more').hide();
				var data=JSON.parse(localStorage.getItem('data'));
				var Objs={};
				var arr=[];
				var obj='';
				for(var i=0;i<11;i++){
					if($('.ulAll li').eq(i).hasClass('active')){
						arr.push($('.ulAll li').eq(i).html());
					}
				}
				
				var cheWeiBi={};
				var obj0=$('.ulNo1 .active').attr('data-minCwb')+'-'+$('.ulNo1 .active').attr('data-maxCwb');
				if(obj0.substring(0,1)=='u'){
					obj0='';
				}
				cheWeiBi.cheWeiBiNum =obj0;
				cheWeiBi.cheWeiBiSign='';
				if($('.active').attr('data-minCwb')==0){
//					cheWeiBi.cheWeiBiNum =$('.ulNo1 .active').attr('data-maxCwb');
					cheWeiBi.cheWeiBiSign=0;
				}
				if($('.active').attr('data-maxCwb')=='1'){
//					cheWeiBi.cheWeiBiNum =$('.ulNo1 .active').attr('data-minCwb');
					cheWeiBi.cheWeiBiSign=1;
				}
				data.screenCharacteristic=arr.join();
				data.cheWeiBi=cheWeiBi;
				data.sheQuGuiMo=$('.ulNo2 .active').html();
				data.page=1,
				localStorage.setItem('data',JSON.stringify(data));
				that.$router.push({
					path: '/',
					name: 'index',
					query: {
						type: data.houseType
					}
				});
				location.reload();
				
			})
			
			$('.ul0 li').eq(1).click(function(){
				$('.more').show();
			})
			
			$('.reset').click(function(){
				$('.more').find('li').each(function(){
					$(this).attr('class','')
				})
			})
			
			$('.topBg').click(function(e){
				location.href='#/'
				$('.lbt').slideDown();
			})
			$('.topBg div').click(function(event){
				event.stopPropagation();
			})
		},
		methods:{
			
		}
	}
</script>
<style scoped>
	.topBg {
		position: absolute;
		width: 100%;
		height: 600px;
		z-index: 999;
		overflow: hidden;
		background-color: rgba(0,0,0,0.3);
	}
	.more {
		position: absolute;
		width: 100%;
		height: 240px;
		overflow: auto;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	h3 {
		margin-bottom: 10px;
		margin-top: 20px;
		padding-left: 3%;
		font-size: 14px;
		font-weight: normal;
	}
	ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
		list-style: none;
		color: #333;
		font-size: 13px;
	}
	ul li {
		width: 26%;
		margin-left: 5.5%;
		margin-bottom: 10px;
		line-height: 30px;
		text-align: center;
		border: 1px solid #c6c6c6;
		color: #999;
		border-radius: 2px;
	}
	ul li.active {
		color: #fff;
		background-color: #0186c2;
		border-color: #0186c2;
	}
	.btn0 {
		position: absolute;
		width: 100%;
		top: 240px;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-around;
	}
	.btn0 button {
		width: 35%;
		margin: 24px 0;
	}
	.btn0 button.ok {
		background-color: #0186c2;
		color: #fff;
	}
	
</style>